<!--
 * @Author: zjf
 * @Date: 2023-11-30 00:36:28
 * @LastEditors: zjf
 * @LastEditTime: 2023-12-06 10:06:40
 * @Description:
-->
<!--
 * @Author: zjf
 * @Date: 2023-11-28 21:21:25
 * @LastEditors: zjf
 * @LastEditTime: 2023-11-30 14:27:13
 * @Description: 投资及支付
-->
<template>
  <div class="l-rblock l-form-viewer" style="padding:5px 20px 0px 20px">
    <div class="l-auto-window">
      <el-tabs v-model="activeName" type="card" :before-leave="handleTabBeforeLeave">
        <el-tab-pane class="l-tabs-container" :label="$t('基本信息')" name="tab0">
          <el-form :model="formData" :rules="rules" size="mini" labelPosition="top" labelWidth="110px" ref="form">
            <l-custom-form ref="CustomForm" :disabled="disabled" :columns="columns"></l-custom-form>
          </el-form>
        </el-tab-pane>
        <template v-if="this.projectId">
          <el-tab-pane class="l-tabs-container" :label="$t('完成投资明细')" name="tab1">
            <CompleteInvestment v-if="activeName == 'tab1'" :projectId="projectId"></CompleteInvestment>
          </el-tab-pane>
          <el-tab-pane class="l-tabs-container" :label="$t('纳统投资明细')" name="tab2">
            <NaitongInvestment v-if="activeName == 'tab2'" :projectId="projectId"></NaitongInvestment>
          </el-tab-pane>
          <el-tab-pane class="l-tabs-container" :label="$t('合同明细')" name="tab3">
            <ContractDetails v-if="activeName == 'tab3'" :projectId="projectId"></ContractDetails>
          </el-tab-pane>
          <el-tab-pane class="l-tabs-container" :label="$t('申请明细')" name="tab4">
            <ApplicationDetails v-if="activeName == 'tab4'" :projectId="projectId"></ApplicationDetails>
          </el-tab-pane>
          <el-tab-pane class="l-tabs-container" :label="$t('支付明细')" name="tab5">
            <PaymentDetails v-if="activeName == 'tab5'" :projectId="projectId"></PaymentDetails>
          </el-tab-pane>
        </template>
      </el-tabs>
      <div class="tab-btn">
        <el-button size="small" @click="handleClose">关闭</el-button>
        <template v-if="activeName == 'tab0' && !disabled">
          <el-button size="small" type="primary" @click="handleSave()">提交 </el-button>
        </template>
      </div>
    </div>
  </div>
</template>
<script>
import { formColmuns } from "./columns";
import CompleteInvestment from "./completeInvestment";
import NaitongInvestment from "./naitongInvestment";
import ContractDetails from "./contractDetails"
import ApplicationDetails from "./applicationDetails"
import PaymentDetails from "./paymentDetails"
export default {
  components: {
    CompleteInvestment,
    NaitongInvestment,
    ContractDetails,
    ApplicationDetails,
    PaymentDetails
  },
  props: {
    disabled: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      fromEditing: false,
      activeName: 'tab0',
      projectId: "",
      formData: {
        projectName: "", // 项目名称
        constructionEntity: "", // 建设单位
        projectYear: "", // 项目所在年度
        projectStartEndDate: "", // 建设起止时间
        plannedInvestmentTotal: "", // 项目计划总投资

        inveAmt: "", // 实际投资总额
        inveAmtLy: "", // 至去年年底累计完成投资
        inveAmtCy: "", // 今年累计完成投资
        contractAmount: "", // 合同总金额
        settlementAmount: "", // 结算金额
        applyAmt: "", // 累计申请金额
        payAmt: "", // 累计支付金额
        inveAmtLys: "", // 至去年年底累计纳统投资
        inveAmtCys: "" // 今年累计纳统投资

      },
      rules: {

      },
      columns: formColmuns,
      progressId: "", // 进度id
    };
  },
  computed: {
  },
  mounted() {
    this.init()

  },
  methods: {
    init() {
      this.$refs.CustomForm.formData = this.formData
    },

    // 重置表单
    resetForm() {
      this.$formClear(this.$refs.form)
      this.activeName = 'tab0'
      Object.assign(this.$data, this.$options.data())
      this.$refs.CustomForm.formData = {}
    },
    // 校验表单
    async validateForm() {
      if (!await this.$formValidateWraper(this.$refs.form)) {
        return false
      }
      return true
    },

    // 获取当前表单数据
    getForm() {
      this.formData = this.$refs.CustomForm.formData
      return this.formData
    },
    /** 加载项目信息   初始化表单 */
    async loadFormData(projectId) {
      this.projectId = projectId
      this.fromEditing = true
      // 获取项目信息
      const projectApi = window.$crud("project");
      const projectData = await this.$awaitWraper(projectApi.get(projectId))


      if (projectData) {
        // 项目信息
        for (const key in this.formData) {
          this.formData[key] = projectData[key] || this.formData[key];
          if (projectData.projectInvestmentPayment && projectData.projectInvestmentPayment.length > 0) {
            this.formData[key] = projectData.projectInvestmentPayment[0][key] || 0
          }
        }
        this.$refs.CustomForm.formData = this.formData
      }

    },

    /** 关闭表单 */
    handleClose() {
      this.$emit('close')
    },
    /** 提交 保存 事件 */
    async handleSave() {
      if (await this.validateForm()) {
        const res = await this.saveForm()
        if (res) {
          this.$message({
            type: 'success',
            message: '提交成功'
          })
          this.$emit('refresh')
        }
      }
    },
    /** 保存表单数据 */
    async saveForm() {
      let postData = this.getForm()
      if (this.progressId) {
        // 编辑
        const api = window.$crud("project/progress");
        return await this.$awaitWraper(api.update(this.progressId, postData))
      } else { // 新增
        const api = window.$crud("project/progress/info");
        return await this.$awaitWraper(api.add(postData))
      }
    },

    /** 表单切换校验 */
    handleTabBeforeLeave(activeName) {
      if (activeName == 'tab0' && this.projectId) {
        this.loadFormData(this.projectId)
      }
    },



  }
}
</script>
<style lang="scss" scoped>
.l-auto-window {
  height: calc(100% - 50px);
}

.tab-btn {
  position: absolute;
  bottom: -40px;
  right: 0px;
}

.l-tabs-container {
  padding-top: 16px !important;
}
</style>